<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onMounted, onUnmounted } from 'vue'

import { change, clear, getResult, question, result, selectIdx, start } from './data'
import { imagePath } from '@/libs/file-utils'

const img_bg = imagePath('quiz/anxiety/detail/bg.jpg')

onMounted(start)
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="quiz-anxiety-detail"
    :pageStyle="{ backgroundImage: img_bg }"
  >
    <div class="title-bar">测焦虑抑郁</div>

    <div class="frame">
      <div
        v-if="result"
        class="result"
      >{{ result.description }}</div>
      <template v-else>
        <div class="question">{{ question?.text }}</div>
        <div class="desc-img">
          <image
            class="inner"
            :src="question?.img"
            mode="widthFix"
          />
        </div>

        <div
          v-if="question"
          class="options"
        >
          <div
            v-for="(item, index) in question.options"
            :key="index"
            class="item"
            @click="selectIdx = index"
          >
            <div
              class="icon"
              :class="{ active: selectIdx === index }"
            ></div>
            <div class="content"> {{ item.label }}</div>
          </div>
        </div>

        <div class="btns">
          <div
            class="btn"
            style="width: 368rpx;"
            @click="getResult"
          >提交并查看答案</div>
          <div
            class="btn"
            style="width: 178rpx;"
            @click="change"
          >换一题</div>
        </div>
      </template>
    </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.title-bar {
  width: 100%;

  box-sizing: border-box;
  padding: 40rpx 30rpx 20rpx;

  color: #5F2D95;
  font-size: 64rpx;
  line-height: 94rpx;
}

.frame {
  width: 682rpx;
  margin: 0 auto 90rpx;

  box-sizing: border-box;
  padding: 40rpx 0;

  background-color: #F3DFC7;
  border-radius: 64rpx;
  box-shadow: 0 0 16rpx 6rpx rgba(0, 0, 0, .19), 0 8rpx 8rpx 0 rgba(255, 255, 255, .45) inset;

  .result {
    width: 602rpx;
    height: 100%;
    margin: 0 auto;

    box-sizing: border-box;
    padding: 28rpx 48rpx;

    background-color: #F4D79D;
    border-radius: 48rpx;
    box-shadow: 0 0 8rpx 4rpx rgba(255, 134, 28, .36);

    color: #461D72;
    font-size: 40rpx;
    line-height: 48rpx;
    white-space: pre-wrap;

    overflow: auto;
    touch-action: pan-y;
  }

  .question {
    width: 100%;
    height: 100%;

    box-sizing: border-box;
    padding: 0 70rpx 18rpx;

    color: #6B4F89;
    font-size: 40rpx;
    line-height: 48rpx;
  }

  .desc-img {
    display: block;
    width: 602rpx;
    margin: 0 auto;

    box-sizing: border-box;
    padding: 16rpx;

    background-color: #F4D79D;
    border-radius: 64rpx;
    box-shadow: 0 0 8rpx 4rpx rgba(255, 134, 28, .36);

    .inner {
      width: 100%;

      border-radius: 64rpx;
      box-shadow: 0 0 6rpx 3rpx rgba(211, 74, 0, .28);
    }
  }

  .options {
    margin-top: 34rpx;
    padding-left: 54rpx;

    display: flex;
    flex-wrap: wrap;
    column-gap: 22rpx;
    row-gap: 24rpx;

    .item {
      width: 274rpx;

      box-sizing: border-box;
      padding: 16rpx 20rpx;

      border-radius: 24rpx;

      background-color: #D880D9;
      box-shadow: 0 2rpx 4rpx 0 rgba(255, 255, 255, 0.57) inset, 0 0 8rpx 0 rgba(70, 0, 48, 0.25) inset, 0 4rpx 10rpx 0 rgba(255, 182, 131, 0.58);

      display: flex;

      .icon {
        width: 32rpx;
        height: 32rpx;

        margin-top: 4rpx;
        margin-right: 10rpx;

        box-sizing: border-box;
        border: 6rpx solid #fff;
        border-radius: 20rpx;

        transition: background-color .2s;

        &.active {
          background-color: #fff;
        }
      }

      .content {
        flex: 1;

        color: #F7ECFF;
        font-size: 32rpx;
        line-height: 40rpx;
      }
    }
  }

  .btns {
    margin-top: 44rpx;

    display: flex;
    justify-content: center;
    column-gap: 24rpx;

    .btn {
      height: 102rpx;

      border-radius: 24rpx;

      background-color: #EEA546;
      color: #FFF8F0;
      font-size: 40rpx;
      line-height: 102rpx;
      text-align: center;
    }
  }
}
</style>